<template>
  <div class="screenbox">
    <div class="screen-content">
      <ul class="screen-ul">
        <li @click="selectType(item)" v-for="(item,index) in searchType" :class="{'active': item.active}" class="screen-li" :key="index">
          {{item.name}}
        </li>
      </ul>
      <ul class="selectDate-ul">
        <li @click="selectfilter(item)" v-for="(item,index) in searchFilter" :class="{'active': item.active}" :key="index"
            class="selectDate-li">{{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'search-com',
    data () {
      return {
        searchType: [
          {
            name: '新闻',
            type: 'post',
            active: true
          },
          {
            name: '报告',
            type: 'report',
            active: false
          },
          {
            name: '项目',
            type: 'project',
            active: false
          },
          {
            name: '活动',
            type: 'activity',
            active: false
          }
        ],
        searchFilter: [
          {
            name: '时间不限',
            filter: '',
            active: true
          },
          {
            name: '一天内',
            filter: 'd1',
            active: false
          },
          {
            name: '三天内',
            filter: 'd3',
            active: false
          },
          {
            name: '一周内',
            filter: 'w1',
            active: false
          },
          {
            name: '一月内',
            filter: 'm1',
            active: false
          },
          {
            name: '三月内',
            filter: 'm3',
            active: false
          },
          {
            name: '一年内',
            filter: 'y1',
            active: false
          }
        ]
      }
    },
    methods: {
      selectType (item) {
        this.searchType = this.searchType.map(data => {
          data.active = false
          if (data.type === item.type) {
            this.$emit('updateType', data.type)
            data.active = true
          }
          return data
        })
      },
      selectfilter (item) {
        this.searchFilter = this.searchFilter.map(data => {
          data.active = false
          if (data.filter === item.filter) {
            this.$emit('updateFilter', data.filter)
            data.active = true
          }
          return data
        })
      }
    }
  }
</script>

<style lang="scss">
  .screenbox {
    width: 648px;
    margin: 0 auto;
    overflow: hidden;
    .screen-content {
      width: 100%;
      .screen-ul {
        display: flex;
        justify-content: flex-start;
        position: relative;
        z-index: 0;
        &::after {
          content: '';
          width: 100%;
          height: 1px;
          background-color: #cad0d8;
          position: absolute;
          bottom: 0;
          z-index: 1;
        }
        .screen-li {
          height: 40px;
          line-height: 40px;
          padding: 0 32px;
          font-size: 18px;
          color: #1b1d21;
          text-align: center;
          cursor: pointer;
          border: 1px solid #fff;
          transition: all .2s ease;
        }
        .active {
          border-left: 1px solid #cad0d8;
          border-top: 1px solid #cad0d8;
          border-right: 1px solid #cad0d8;
          border-bottom: 1px solid #fff;
          z-index: 9;
          transition: all .3s ease;
        }
        li.screen-li:first-child.active {
          border-left: 1px solid #fff;
        }
      }
      .selectDate-ul {
        display: flex;
        justify-content: flex-start;
        margin-top: 30px;
        padding-left: 16px;
        .selectDate-li {
          line-height: 24px;
          padding: 0 16px;
          font-size: 14px;
          text-align: center;
          color: #878787;
          cursor: pointer;
        }
        .active {
          background-color: #00ba91;
          border-radius: 16px;
          color: #fff;
        }
      }
    }
  }
</style>
